<template>
<Select multiple v-model="selectVal" clearable @on-change="onChange" @on-clear="onClear">
        <Option v-for="item in ruleItems"  :value="item.RuleID+''" :key="item.RuleID">
                {{ item.RuleName }}
                </Option>
    </Select>
</template>

<script>
import AppFrame from '../libs/app-frame';
export default {
    name: 'rule-select',
    props:{
        partnersId:{
            type: Number,
            default: -1
        },
        value:{
            type:Array,
            default:[]
        }
    },
    model: {
        prop: 'value',
        event: 'updateVal'
    },
    data: function () {
        return {
            selectVal: JSON.parse(JSON.stringify(this.value)),
            ruleItems: []
        }
    },
    created() {
        this.getData(this.partnersId);
    },

    watch: {
        value: function (curVal) {
            this.selectVal =JSON.parse(JSON.stringify(curVal));;
        },

        ruleItems: {
            handler: function (curVal, oldVal) {
                this.selectVal=JSON.parse(JSON.stringify(this.value));
            }
        },

        partnersId: function (curVal, oldVal) {
            if (curVal != oldVal) {
                this.selectVal.splice(0,this.selectVal.length);
                this.getData(curVal);
            }
        }
    },

    methods: {
        getData: async function (partnersId) {
            let res = await AppFrame.Http.Post("/manage-api/system/rule/getItemsByPartnersID", {
                partnersId: partnersId
            });
            if (res && res.Result == 1) {
                this.ruleItems = res.Data;
               
            }

        },

        setValue: function (val) {
            this.$emit("updateVal", val);
        },
        onChange: function (val) {
            this.setValue(val);
            this.$emit('on-change', val);
        },
        onClear: function () {
            this.$emit('on-change', 0);
        }
    }
}
</script>

<style scoped>

</style>
